<template>
  <el-aside style="background-color: rgb(238, 241, 246);height: 100%" width="200px">
    <el-menu :collapse="isCollapse" :collapse-transition="false"
             active-text-color="#ffd04b"
             background-color="#545c64"
             default-active="/home"
             router
             style="height: 100vh"
             text-color="#fff"
    >
      <el-menu-item index="/home">
        <i class="el-icon-s-home"></i>
        <span slot="title">首页</span>
      </el-menu-item>

      <el-menu-item v-for="(item,i) in menu" :key="i" :index="'/'+item.menuClick">
        <i :class="item.menuIcon"></i>
        <span slot="title">{{ item.menuName }}</span>
      </el-menu-item>

    </el-menu>
  </el-aside>
</template>

<script>
export default {
  name: "Main-aside",
  data () {
    return {
      /*      menu:[
              {
                menuClick:'Admin',
                menuName:'管理员管理',
                menuIcon:'el-icon-s-custom'
              },
              {
                menuClick:'User',
                menuName:'用户管理',
                menuIcon:'el-icon-user-solid'
              }
            ]*/
    }
  },

  computed: {
    "menu": {
      get () {
        return this.$store.state.menu
      }
    }
  },

  props: {
    isCollapse: Boolean
  }
}
</script>

<style scoped>

</style>
